<template>
  <view class="demo-order-list">
    <fu-order-list
      :orders="orders"
      :load-more-status="loadMoreStatus"
      :loading="loading"
      v-model="activeTab"
      @click="onOrderClick"
      @buttonClick="onButtonClick"
      @tabChange="onTabChange"
      @loadMore="onLoadMore"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'all',
      loadMoreStatus: 'more',
      loading: false,
      page: 1,
      orders: [
        {
          id: '1',
          shopName: '官方旗舰店',
          status: 'unpaid',
          goods: [
            {
              id: '1',
              name: '2023新款女装连衣裙',
              attrs: '颜色: 黑色; 尺码: M',
              image: 'https://cdn.uviewui.com/uview/album/1.jpg',
              price: '299.00',
              count: 1
            }
          ],
          totalCount: 1,
          totalAmount: '299.00'
        },
        {
          id: '2',
          shopName: '品牌专卖店',
          status: 'unshipped',
          goods: [
            {
              id: '2',
              name: '男士休闲运动套装',
              attrs: '颜色: 灰色; 尺码: XL',
              image: 'https://cdn.uviewui.com/uview/album/2.jpg',
              price: '399.00',
              count: 2
            }
          ],
          totalCount: 2,
          totalAmount: '798.00'
        },
        {
          id: '3',
          shopName: '运动户外专营店',
          status: 'unreceived',
          goods: [
            {
              id: '3',
              name: '专业跑步运动鞋',
              attrs: '颜色: 白色; 尺码: 42',
              image: 'https://cdn.uviewui.com/uview/album/3.jpg',
              price: '599.00',
              count: 1
            }
          ],
          totalCount: 1,
          totalAmount: '599.00'
        },
        {
          id: '4',
          shopName: '数码配件专营店',
          status: 'unrated',
          goods: [
            {
              id: '4',
              name: '无线蓝牙耳机',
              attrs: '颜色: 白色',
              image: 'https://cdn.uviewui.com/uview/album/4.jpg',
              price: '299.00',
              count: 1
            }
          ],
          totalCount: 1,
          totalAmount: '299.00'
        },
        {
          id: '5',
          shopName: '美妆个护旗舰店',
          status: 'completed',
          goods: [
            {
              id: '5',
              name: '补水保湿护肤套装',
              attrs: '规格: 标准装',
              image: 'https://cdn.uviewui.com/uview/album/5.jpg',
              price: '459.00',
              count: 1
            }
          ],
          totalCount: 1,
          totalAmount: '459.00'
        }
      ]
    }
  },
  
  methods: {
    onOrderClick(order) {
      uni.showToast({
        title: `点击订单: ${order.id}`,
        icon: 'none'
      })
    },
    
    onButtonClick({ action, order }) {
      uni.showToast({
        title: `点击${action}按钮: ${order.id}`,
        icon: 'none'
      })
    },
    
    onTabChange({ status, isFirst }) {
      // 切换标签时重置页码
      this.page = 1
      
      // 模拟加载数据
      uni.showLoading({
        title: '加载中...'
      })
      this.loading = true
      
      setTimeout(() => {
        // 模拟请求数据
        if (status === 'all') {
          this.orders = this.getOrdersByStatus()
        } else {
          this.orders = this.getOrdersByStatus(status)
        }
        
        this.loading = false
        uni.hideLoading()
        
        // 更新加载更多状态
        this.loadMoreStatus = this.orders.length >= 20 ? 'noMore' : 'more'
      }, 500)
    },
    
    // 加载更多
    onLoadMore({ status, page }) {
      if (this.loading) return
      
      this.loading = true
      this.loadMoreStatus = 'loading'
      
      setTimeout(() => {
        // 模拟加载更多数据
        const moreOrders = this.getOrdersByStatus(status, page)
        this.orders = [...this.orders, ...moreOrders]
        
        this.loading = false
        this.loadMoreStatus = moreOrders.length < 10 ? 'noMore' : 'more'
      }, 500)
    },
    
    // 模拟获取订单数据
    getOrdersByStatus(status = 'all', page = 1) {
      // 这里应该是实际的接口请求
      // 这里只是示例数据
      return this.orders.filter(order => {
        if (status === 'all') return true
        return order.status === status
      }).slice((page - 1) * 10, page * 10)
    }
  }
}
</script>

<style lang="scss">
.demo-order-list {
  min-height: 100vh;
  background-color: #f5f5f5;
}
</style> 